<template>
  <div>
    <div>手机-￥1000-数量：{{ num1 }}<button @click="add1">+</button><button @click="reduce1" :disabled="num1<=0">-</button></div>
    <div>电脑-￥2000-数量：{{ num2 }}<button @click="add2">+</button><button @click="reduce2" :disabled="num2<=0">-</button></div>
    <div>键盘-￥200-数量：{{ num3 }}<button @click="add3">+</button><button @click="reduce3" :disabled="num3<=0">-</button></div>
    <div>总价：￥{{totalSum}}</div>
    
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      
    };
  },
  computed: {
    num1(){
      return this.$store.state.num1
    },
    num2(){
      return this.$store.state.num2
    },
    num3(){
      return this.$store.state.num3
    },
    totalSum(){
      return  this.$store.getters.totalSum 
    }
  },
  methods: {
    add1(){
      this.$store.commit("ADD1")
    },
    reduce1(){
      this.$store.commit('REDUCE1')
    },
    add2(){
      this.$store.commit("ADD2")
    },
    reduce2(){
      this.$store.commit('REDUCE2')
    },
    add3(){
      this.$store.commit("ADD3")
    },
    reduce3(){
      this.$store.commit('REDUCE3')
    }

 
  }
}
</script>

<style></style>
